<template>
  <div>
  <!-- 布局 -->
  <el-container>
  <el-aside  :width="isCollapse ? '64px':'200px'"
  
  >
  <!-- 左侧菜单使用了compute -->
 <el-menu
       router
        :unique-opened='true'
       :collapse="isCollapse"
       :default-active='$route.path'
      class="el-menu-vertical-demo"
     
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
     <el-menu-item :index="item.path"  v-for="item in nochilden" :key="item.path">
        <i :class="'el-icon-'+item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>

      <el-submenu index="1" v-for="subitem in haschilden" :key="subitem.path">
        <template slot="title">
          <i :class="'el-icon-'+subitem.icon"></i>
          <span>{{subitem.label}}</span>
        </template>
        <el-menu-item-group>
         
          <el-menu-item :index="i.path" v-for="i in subitem .children" :key="i.path">{{i.label}}</el-menu-item>
       
        </el-menu-item-group>
     
       
      </el-submenu>
   
     
     
    </el-menu>

  </el-aside>
  <el-container>
    <el-header>
     <div class="left">
     <el-button  class="expand" icon='el-icon-s-fold' @click="handCollapse"></el-button>
     <span>首页</span>
     </div>
     <div class="user">
      <el-dropdown>
      <el-avatar size="large" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
     </el-avatar>
    
     <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item @click.native="quit">退出</el-dropdown-item>
  
   
  </el-dropdown-menu>
  </el-dropdown>
     </div>


    </el-header>
    <!-- 子路由 -->
    <el-main>
    <router-view/>
    </el-main>
  </el-container>
</el-container>
 
  </div>
</template>

<script>
export default {
data() {
    return {
      //   menu:[
      //   {
      //     path: '/',
      //     name: 'home',
      //     label: '首页',
      //     icon: 's-home',
      //     url: 'Home/Home'
      //   },
      //   {
      //     path: '/mall',
      //     name: 'mall',
      //     label: '商品管理',
      //     icon: 'video-play',
      //     url: 'MallManage/MallManage'
      //   },
      //   {
      //     path: '/user',
      //     name: 'user',
      //     label: '用户管理',
      //     icon: 'user',
      //     url: 'UserManage/UserManage'
      //   },
      //   {
      //     label: '其他',
      //     icon: 'location',
      //     children: [
      //       {
      //         path: '/page1',
      //         name: 'page1',
      //         label: '页面1',
      //         icon: 'setting',
      //         url: 'Other/PageOne'
      //       },
      //       {
      //         path: '/page2',
      //         name: 'page2',
      //         label: '页面2',
      //         icon: 'setting',
      //         url: 'Other/PageTwo'
      //       }
      //     ]
      //   }
      // ], 
      
       
      
    
    }

},
methods: {
    handCollapse(){
      this.$store.commit('CollapseMune')
    },
    getmenu(){
      this.$store.commit('getMune')
    },
    quit(){
      console.log('退出登录')
       this.$store.commit('clearToken')
       this.$store.commit('clearMune')
       this.$router.push('/login')
    },
},
 computed:{
   nochilden(){
 return  this.MuneList.filter(item =>!item.children );
   },
   haschilden(){
  return   this.MuneList.filter(item => item.children);
   },
   isCollapse(){
    return this.$store.state.tab.isCollapse
   },
   MuneList(){
    return this.$store.state.tab.mune
    
   }
   

    },
mounted() {
  console.log(this.$store.state.tab.mune)
},
    
    
}
</script>

<style scoped>
 .el-header {
    background-color: #333333;
    color: #fff;
  

    
  }
  .el-container{
    height: 100vh;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
   
    
  }
  
  .el-main {
   
    background-color: #E9EEF3;
    color: #333;
   
   
  }
  .el-menu{
    height: 100%;
    width: 200px;
    border-right: none;

  }
  .el-aside{
   
  }
  .el-avatar{
    width: 40px;
    height: 40px;
  }
  
 .el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
  .left{
    display: flex;
    align-items: center;

  }
  .left>button{
   margin-right: 20px;
  }
  
</style>